<template>
    <div class="container">
        <div class="btns">
            <div class="btn" :class="{active:item.active}" v-for="item in warnTableList" :key="item.value" @click="warnBtns(item)">{{ item.label }}</div>
        </div>
        <div class="search" v-if="tabIndex === 1">
            <el-form :model="searchForm" inline>
                <el-form-item label="时间">
                    <el-date-picker
                        v-model="searchForm.date"
                        type="year"
                        placeholder="时间"
                        value-format="YYYY"
                        />
                </el-form-item>
            </el-form>
            <div class="btn">
                <el-button type="primary" size="small" @click="search">查询</el-button>
            </div>
        </div>
        <div class="chart" v-if="tabIndex === 1">
            <Bar :chartData="chartData1" v-if="chartData1" />
        </div>
        <div class="chart" style="height: calc(100% - 3rem);" v-if="tabIndex === 2">
            <Bar :chartData="chartData2" v-if="chartData2" />
        </div>
        <div class="search" v-if="tabIndex === 3 || tabIndex === 4">
            <el-form :model="searchForm1" inline>
                <el-form-item label="统计方式">
                    <el-select v-model="searchForm1.staticType" placeholder="请选择" size="small">
                        <el-option
                            v-for="item in ststisTableList"
                            :key="item.dictValue"
                            :label="item.dictLabel"
                            :value="item.dictValue"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间">
                    <el-date-picker
                        v-model="searchForm1.date"
                        type="daterange"
                        value-format="YYYY-MM-DD"
                        range-separator="--"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                    />
                </el-form-item>
            </el-form>
            <div class="btn">
                <el-button type="primary" size="small" @click="search">查询</el-button>
            </div>
        </div>
        <div class="chart" v-if="tabIndex === 3">
            <Bar :chartData="chartData3" v-if="chartData3" />
        </div>
        <div class="chart" v-if="tabIndex === 4">
            <div style="height: 50%;">
                <Bar :chartData="chartData4" v-if="chartData4" />
            </div>
            <div style="height: 50%;">
                <Bar :chartData="chartData5" v-if="chartData5" />
            </div>
        </div>
    </div>
</template>
<script setup>
    import { ref, onMounted, nextTick } from "vue";
    import { scoreOption, scoreOption2, scoreOption3, scoreOption4, scoreOption5 } from './echartsoptions'
    import { tableHeader, table, scoreTable, ststisTable, quesData, report } from './dataconfig'
    import Bar from '@/components/echarts/bar.vue'
    const warnTableList = ref(scoreTable)
    const ststisTableList = ref(ststisTable)
    const tabIndex = ref(1);
    const searchForm = ref({
        date: ''
    })
    const searchForm1 = ref({
        date: [],
        staticType: ''
    })
    const quesTabData = ref(quesData)
    const chartData1 = ref(null)
    const chartData2 = ref(null)
    const chartData3 = ref(null)
    const chartData4 = ref(null)
    const chartData5 = ref(null)
    onMounted(() => {
        nextTick(() => {
            chartData1.value = scoreOption
            chartData2.value = scoreOption2
            chartData3.value = scoreOption3
            chartData4.value = scoreOption4
            chartData5.value = scoreOption5
        })
    })
    const warnBtns = (item) => {
        warnTableList.value.forEach(t => {
            t.active = false
            if (t.value === item.value) {
                tabIndex.value = item.value
                t.active = true
            }
        })
    }
</script>
<style scoped lang="less">
.container {
    height: 100%;
    width: 100%;
    color: #fff;
    .btns {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0.5rem 0;
        .btn {
            background: #0B2A4A;
            width: calc(25% - 0.5rem);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.2rem 0;
            color: #fff;
            cursor: pointer;
            &.active {
                background: #636737;
            }
        }
    }
    .search {
        display: flex;
        align-items: center;
        margin-top: 0.5rem;
    }
    ::v-deep(.el-form) {
        .el-select {
            width: 4rem;
        }
        .el-select__wrapper {
            background-color: #133C57 !important;
            box-shadow: none;
        }
        .el-date-editor.el-input__wrapper {
            width: 7rem;
            padding: 0;
        }
        .el-date-editor .el-range__icon {
            display: none;
        }
        .el-date-editor .el-range-separator {
            padding: 0;
        }
        .el-form-item {
            margin-right: 1rem;
            margin-bottom: 0;
        }
        .el-input__wrapper {
            background-color: #133C57 !important;
            box-shadow: none;
        }
        .el-input__inner {
            font-size: 10px;
            color: #a8abb2;
        }
        .el-select__input,
        .el-select__placeholder,
        .el-select__prefix, .el-select__suffix,.el-select__caret,
        .el-date-editor .el-range-input,.el-date-editor .el-range-separator,
        .el-date-editor .el-range__close-icon,
        .el-form-item__label {
            color: #fff;
        }
    }
    .chart {
        height: calc(100% - 5rem);
    }
}
</style>